<template>
	<div>
		<HfTable :data-array="trades || []" :options="options" :default-sort="{ prop: 'TradeID', order: 'descending' }">
			<template #Direction="{ scope, editing }">
				{{ scope.row.Direction === 49 ? '买' : '卖' }}
			</template>
			<template #OffsetFlag="{ scope, editing }">
				{{ scope.row.OffsetFlag === 48 ? '开仓' : scope.row.OffsetFlag === 49 ? '平仓' : '平今' }}
			</template>
			<template #Price="{ scope, editing }">
				{{ scope.row.Price.toFixed(2) }}
			</template>
		</HfTable>
	</div>
</template>

<script setup lang="ts">
import type { TableOptions } from '~/components/types'

const { data: trades, refresh: refreshTrade } = useHttp.getLazy<Trade[]>('/trade')

const options: TableOptions[] = [
	{
		label: '成交编号',
		prop: 'TradeID',
		width: 100,
	},
	{
		label: '合约',
		prop: 'InstrumentID',
		width: 100,
	},
	{
		label: '交易所',
		prop: 'ExchangeID',
		width: 100,
	},
	{
		label: '买卖',
		prop: 'Direction',
		useSlot: true,
		width: 80,
	},
	{
		label: '开平',
		prop: 'OffsetFlag',
		useSlot: true,
		width: 80,
	},
	{
		label: '价格',
		prop: 'Price',
		useSlot: true,
		width: 100,
	},
	{
		label: '手数',
		prop: 'Volume',
		width: 80,
	},
	{
		label: '时间',
		prop: 'TradeTime',
		width: 100,
	},
	{
		label: '报单编号',
		prop: 'OrderSysID',
		width: 100,
	},
]
const { data: trade } = useSSE('trade')
watch(trade, () => {
	refreshTrade()
})
onMounted(() => refreshTrade())
</script>

<style scoped></style>
